<template>
  <div>
  概览
  <!-- 使用store -->
  <p>用户名：{{ userStore.userInfo.name }}，分数 {{userStore.userInfo.score  }}</p>
  <!-- 更改store -->
  <button @click="userStore.userInfo.score++">{{ userStore.userInfo.score }}</button>
  <p>窗口的宽：{{ size.w }}, 高：{{ size.h }}</p>
  <p ref="elem">我爱你呀，你爱我，我们一起甜蜜蜜</p>
  <p ref="elem1">我不要学习，只想搞钱</p>
  <p>滚动的距离：{{ num }}</p>
  <p>鼠标的位置：{{ p.x }}，{{ p.y }}</p>
  <div style="width:300px;height:300px;border:1px solid red;overflow:auto" ref="elem2">
    我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，我是测试，
  </div>
  </div>
</template>

<script setup>
// 导入自己定义的api
import {useWinSize, useReverse,useScroll,useMouse} from '@/utils'
// 导入使用用户仓库的方法
 import {useUserStore} from '@/stores/user.js'
//  通过调用useUserStore方法返回一个仓库

 const userStore = useUserStore();
 const size = useWinSize();
 const elem = useReverse();
 const elem1 = useReverse();
 const [elem2,num] = useScroll();
 const p = useMouse(true)
</script>

<style lang="scss" scoped>
</style>